<template>
  <div class="education-form edit-card">
    <h2>教育背景</h2>
    <div v-for="(edu, index) in educations" :key="index" class="education-item">
      <div class="form-group">
        <label :for="`school-${index}`">学校名称</label>
        <input :id="`school-${index}`" type="text" v-model="edu.school" placeholder="请输入学校名称" required>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label :for="`degree-${index}`">学历</label>
          <select :id="`degree-${index}`" v-model="edu.degree" required>
            <option value="">请选择学历</option>
            <option value="高中">高中</option>
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </div>

        <div class="form-group">
          <label :for="`major-${index}`">专业</label>
          <input :id="`major-${index}`" type="text" v-model="edu.major" placeholder="请输入专业" required>
        </div>
      </div>

      <div class="form-group">
        <label :for="`date-${index}`">时间范围</label>
        <input :id="`date-${index}`" type="text" v-model="edu.date" placeholder="例如: 2015.09-2019.06" required>
      </div>

      <button class="remove-btn" @click="removeEducation(index)" v-if="educations.length > 1">删除</button>
    </div>

    <button class="add-btn" @click="addEducation">添加教育经历</button>
  </div>
</template>

<script setup>
const props = defineProps({
  educations: {
    type: Array,
    required: true,
    default: () => [{
      school: '',
      degree: '',
      major: '',
      date: ''
    }]
  }
})

const emit = defineEmits(['update:educations'])

const localEducations = ref([...props.educations])

const addEducation = () => {
  localEducations.value.push({
    school: '',
    degree: '',
    major: '',
    date: ''
  });
  emit('update:educations', localEducations.value)
};

const removeEducation = (index) => {
  localEducations.value.splice(index, 1);
  emit('update:educations', localEducations.value)
};

watch(() => props.educations, (newVal) => {
  localEducations.value = [...newVal]
}, { deep: true })

watch(localEducations, (newVal) => {
  emit('update:educations', [...newVal])
}, { deep: true })
</script>

<style scoped>
.education-item {
  position: relative;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px dashed #ddd;
  border-radius: 4px;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

input,
select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

input:focus,
select:focus {
  border-color: #42b983;
  outline: none;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.add-btn,
.remove-btn {
  padding: 6px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff6b6b;
}

.add-btn {
  display: block;
  margin-top: 10px;
  width: 100%;
}
</style>